import React from "react";

export default function Segment({ text, className = "" }) {
    const dsn = text.match(/(.*?):(.*?)\@(.*?)\((.*?):(.*?)\)\/(.*)/);
    let segments: any = [];
    if (dsn) {
        segments = [
            {
                type: "text",
                content: dsn[1],
                description: "数据库账号",
            },
            {
                type: "symbol",
                content: ":",
            },
            {
                type: "text",
                content: dsn[2],
                description: "数据库密码",
            },
            {
                type: "symbol",
                content: "@",
            },
            {
                type: "text",
                content: dsn[3],
                description: "通信协议",
            },
            {
                type: "symbol",
                content: "(",
            },
            {
                type: "text",
                content: dsn[4],
                description: "数据库IP地址",
            },
            {
                type: "symbol",
                content: ":",
            },
            {
                type: "text",
                content: dsn[5],
                description: "数据库通信端口",
            },
            {
                type: "symbol",
                content: ")/",
            },
            {
                type: "text",
                content: dsn[6],
                description: "数据库名称",
            },
        ];
    }
    return (
        <div
            className={
                "flex text-2xl text-black bg-white rounded p-4 " + className
            }
        >
            {segments.length > 0 &&
                segments.map((item) => {
                    if (item.type === "text") {
                        return (
                            <div className="relative text-center flex flex-col">
                                <span>{item.content}</span>
                                <span className="border-b-2 border-red-500 mt-2 mb-2"></span>
                                <span>{item.description}</span>
                            </div>
                        );
                    }
                    return (
                        <div className="pl-4 pr-4">
                            <span>{item.content}</span>
                        </div>
                    );
                })}
        </div>
    );
}
